import React, { Component } from "react";

class App extends Component {
  state = {
    count: 1,
    msg: "hello",
  };

  handleClick() {
    // console.log(this);
    // setState方法是用来修改state的值
    // setState有两个参数
    // 第一个参数可以是对象, 第二个参数是回调函数
    // this.setState(
    //   {
    //     count: 10,
    //   },
    //   () => {
    //     console.log(this.state.count);
    //   }
    // );
    // 第一个参数还可以是函数, 第二个参数还是回调函数
    // 如果改变以后的值不依赖于前一次的值的时候，使用对象的写法，否则使用函数的写法
    // this.setState(
    //   (prevState) => {
    //     return {
    //       count: prevState.count + 1,
    //     };
    //   },
    //   () => {
    //     console.log(this.state.count);
    //   }
    // );
  }

  render() {
    return (
      <>
        <h3>设置state</h3>
        <p>{this.state.count}</p>
        {/* <button onClick={this.handleClick.bind(this)}>btn</button> */}
        <button>btn</button>
      </>
    );
  }

  /*
    setState在合成事件里面是异步的
    setState在生命周期里面是异步的

    setState在定时器里面是同步的
    setState在原生js里面是同步的
  */

  // 相当于mounted
  componentDidMount() {
    // setTimeout(() => {
    //   this.setState({
    //     count: 10,
    //   });
    //   console.log(this.state.count);
    // }, 2000);

    document.querySelector("button").addEventListener("click", () => {
      this.setState({
        count: 10,
      });
      console.log(this.state.count);
    });
  }
}

export default App;
